body{
  font-family: 'PingFang SC','Microsoft YaHei';
  font-size: 14px;
  padding: 0;
  margin: 0;
  color: #fff;
  background-image: linear-gradient(#110f2e,#1c1e54,#0f0f2d);
}
.content {
  position: absolute;
  width: 100%;
  background-image: linear-gradient(#110f2e,#1c1e54,#0f0f2d);
  min-width: 1024px;
  min-height: 800px;
  height: 100vh;
  display: flex;
}
.left-content, .right-content {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  min-width: 420px;
}
.center-content{
  flex-grow: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.left-content > div, .right-content > div {
  flex-grow: 2;
  height: 100%;
}

.left-content > div:first-child {
  flex-grow: 1;
  height: 500px;
}
.left-chart {
  min-height: 250px;
  background-image: url(~@/assets/border.png);
  background-repeat: no-repeat;
  background-size: 100% 300px;
  margin-left: 40px;
  padding-bottom: 20px;
}
#left_chart1, #left_chart2 {
  min-height: 250px;
  width: inherit;
  height: inherit;
}
.chart-title {
  margin: 0;
  background-color: #292c75;
  width: 250px;
  margin: auto;
  text-align: center;
  padding: 5px 0;
  font-weight: 700;
}
.chart-title span {
  display: inline-block;
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#aaf8fb), to(#439cf9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-info {
  padding: 10px 80px;
  color: #fff;
  min-width: 600px;
  position: relative;
}
.main-info>p {
  /* font-family: "PingFang SC Light"; */
  font-size: 30px;
  margin: 0 0 5px 0;
}
.main-info>p + span {
  font-size: 14px;
  font-weight: 100;
  color: rgba(255, 255, 255, .8);
  display: inline-block;
  padding: 3px 15px;
  background-color: rgba(66, 102, 204, .4);
}
.main-info-box {
  position: relative;
  height: 240px;
  border: 1px solid rgba(46, 77, 183, .7);
  box-shadow: -5px 5px 10px 2px rgba(100, 100, 140, .25), -10px 10px 24px rgba(80, 80, 180, .1),0 0 200px rgba(61, 90, 226, .3) inset;
}
.little-angel {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
}
.little-angel span {
  display: block;
  height: 2px;
  width: 30px;
  background-color: #00d8f4;
}
.little-angel span:after {
  content: "";
  position: relative;
  display: block;
  width: 2px;
  height: 30px;
  background-color: #00d8f4;
  left: 30px;
}
.little-angel2 {
  left: 0;
  bottom: 0;
}
.little-angel2 span {
  position: relative;
  top: 30px;
}
.little-angel2 span:after {
  left: 0;
  top: -30px;
}
.top-num {
  display: inline-block;
  vertical-align: top;
  margin: 24px 0;
  text-align: center;
  width: 52px;    
  height: 72px;
  line-height: 72px;
  border-radius: 4px;
  background-color: rgba(49, 52, 130, .85);
  border: 1px solid rgba(49, 52, 130, .55);
  font-size: 48px;
  font-weight: 900;
  color: #3998f9;
  box-shadow: 0 2px 4px rgba(7, 26, 183, 0.4), 0 0 16px rgba(153, 162, 234, .2), 0 0 6px rgba(0, 0, 0, .1) inset;
}
.top-num span, .top-unit span {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ffe0), to(#007eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top-unit {
  display: inline-block;
  margin: 36px 2px 24px 10px;
  vertical-align: top;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
}
.top-unit span {
  display: block;
}
.main-info-box-half {
  height: 120px;
  position: relative;
}
.main-info-box-half:nth-child(2){
  border-top: 1px solid rgba(66, 102, 204, .25);    
}
.main-info-data {
  display: inline-block;
  width: 48%;
  text-align: center;
}
.main-info-sub-box {
  display: inline-block;
  width: 30%;
  text-align: center;
}
.main-info-sub-box div{
  display: inline-block;
  vertical-align: top;
}
.main-info-sub-box>p {
  margin: 10px 0;
  font-size: 16px;
  font-weight: 600;
  text-shadow: rgba(100, 100, 140, .2);
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#a7a7a7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.buttom-num {
  display: inline-block;
  width: 26px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(173, 195, 255, 0.1);
  line-height: 40px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(100, 100, 140, .2);
}
.buttom-num span {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#a7a7a7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.buttom-unit p{
  margin: 0
}
.buttom-unit p {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#00f7d5), to(#007eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  margin-top: 16px;
  font-size: 18px;
}

.center-img {
  position: relative;
  flex-grow: 2;
  min-height: 533.333px;
  height: 75vh;
  background-image: url(~@/assets/bg.png);
  background-position: center bottom;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}
.point-style {
  width: 10px;
  background-color: transparent;
  border: none;
  box-shadow: none
}
/*   天气样式  */
.weather-info {
  color: #fff;
  padding: 20px 0 20px 50px;
  height: 140px;
}
.weather {
  width: 266px;
}
.weather-info > div{
  display: inline-block;
  vertical-align: top;
}
.weather p, .room-info p {
  margin: 0
}
.date {
  font-size: 16px;
}
.weather-now > *{
  display: inline-block;
  vertical-align: middle;
}
.weather-now span:first-child {
  font-size: 48px;
}
.weather-now span:nth-child(2) {
  font-size: 40px;
}
.weather-now span:nth-child(3) {
  margin-left: 10px;
  font-size: 20px;
}
.temp-rang {
  font-size: 16px;
}
.weather-img{
  width: 72px;
  height: 72px;
  margin-left: 20px;
  background-size: 72px 72px;
  background-repeat: no-repeat;
  background-position: center;
}
.room-info {
  border: 1px solid rgba(100,75,200,.5);
  padding: 10px;
  margin-left: 10px;
  font-size: 12px;
  background-color: rgba(255, 255, 255, .05);
  box-shadow:  0 0 20px rgba(61, 90, 226, .3) inset;
}

.room-info > p:first-child {
  font-size: 16px;
  font-weight: 700;
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#aaf8fb), to(#439cf9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.room-data {
  font-size: 16px;
  font-weight: 700;
}



.center-pop {
  margin: 80px;
  padding: 20px;
  width: 220px;
  color: #fff;
  background-color: rgba(135, 142, 205, .1);
  box-shadow: 0 0 80px rgba(255, 255, 255, .1) inset;
}
.center-pop p {
  font-size: 16px;
  text-align: center;
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #007eff;
}
.center-pop ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.center-pop ul li {
  height: 37px;
  line-height: 37px;
}
.center-pop ul li span:nth-child(1) {
  color: #007eff;
}
.center-pop ul li span:nth-child(2) {
  font-weight: 700;
  padding-left: 20px;
}

.buling-pop {
  position: absolute;
  width: 72px;
}
.buling-pop1 {left: 45%;bottom: 46%;}
.buling-pop2 {left: 50%;bottom: 70%;}
.buling-pop3 {left: 62%;bottom: 61%;}
.buliding-info {
  /* font-family: "PingFang SC Light"; */
  color: #fff;
  position: relative;
  padding: 4px 4px 4px 10px;
  top: 12px;
  height: 60px;
  border-radius: 4px;
  background-color: rgba(0, 126, 255, .3);
  box-shadow: 7px 7px 40px rgba(0, 126, 255, .5);
}
.buliding-info p {
  margin: 0;
  font-size: 14px;
}
.buliding-info p span {
  font-size: 18px;
  font-weight: 900;
}
.buliding-name {
  position: relative;
  font-size: 14px;
  width: 72px;
  color: #444;
  text-align: center;
  padding: 2px 0;
  border-radius: 12px;
  background-color: #ddd;
  background-image: linear-gradient(#f1f1f1,#999);
}
.buliding-name:after {
  position: absolute;
  left: 24px;
  top: 23px;
  content: '';
  border: 10px solid transparent;;
  border-top: 10px solid #999;
}

.right-table {
  padding: 20px;
}
.right-table h4 {
  padding: 8px 40px;
  background-color: #292c75;
  
}
.right-table h4 span {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#aaf8fb), to(#439cf9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.desk-table {
  border-collapse: collapse;
  width: 100%;
  color: #fff;
}
.desk-table td, .desk-table th {
  height: 36px;
  padding: 2px 10px; 
}
.desk-table td {
  text-align: center;
  height: 30px;
  padding: 2px 10px; 
}
.desk-table thead tr {
  color: #007eff;
}

.desk-table tbody tr td:last-child {
  color: #19c6db;
}
.desk-table tbody tr:nth-child(even) {
  background-color: rgba(68, 110, 255, .25);
}
.desk-table2 {
  border: 4px solid rgba(41, 44, 117, .5);
  padding: 10px;
  border-radius: 4px;
}
.desk-table th{
  width: 25%;
}
.desk-table2 td{
  width: 25%;
}
/* sub1 */

.content-sub {
  position: absolute;
  width: 100%;
  background-image: linear-gradient(#110f2e,#1c1e54,#0f0f2d);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  min-width: 1024px;
  padding: 30px 20px;
  /* overflow: hidden; */
}
.sub-box1 {
  box-sizing: border-box;
  padding: 10px;
  width: 40%;
}
.sub-box2 {
  box-sizing: border-box;
  padding: 10px;
  width: 60%;
}
.sub-box3 {
  box-sizing: border-box;
  padding: 10px;
  width: 50%;
}
.sub1-chart {
  box-sizing: border-box;
  border: 1px solid #292c75;
  box-shadow: 0 0 150px rgba(255, 255, 255, .1) inset;
  height: 100%;
  min-height: 266.66px;
}
#sub1_chart1, #sub1_chart2, #sub1_chart3, #sub1_chart4, #sub1_chart5, #sub1_chart6 {
  width: 100%;
  min-height: 250px;
}
.sub1-box-chart {
  box-sizing: border-box;
  display: flex;
}
.sub1-proportion {
  box-sizing: border-box;
  width: 20%;
  margin: 40px 0;
  text-align: center;
  border-right: 1px solid #292c75;
  font-size: 12px;
  padding-top: 40px;
}
.sub1-proportion p {
  margin: 4px 0;
}
.sub1-proportion i {
  font-size: 48px;
  color: #d900c6;
}
.sub1-proportion p:last-child {
  font-size: 20px;
  font-weight: 700;
  color: #00d8f4;
}

/* sub2 */
.sub-box4 {
  box-sizing: border-box;
  padding: 10px;
  width: 60%;
}
.sub-box5 {
  box-sizing: border-box;
  padding: 10px;
  width: 40%;
}
.sub2-chart {
  box-sizing: border-box;
  border: 1px solid #292c75;
  box-shadow: 0 0 150px rgba(255, 255, 255, .1) inset;
  height: 100%;
  min-height: 500px;
}
#sub2_chart1 {
  width: 100%;
  min-height: 250px;
}
.by-box{
  display: flex;
  justify-content: space-around;
}

.by {
  box-sizing: border-box;
  width: 100px;
  height: 200px;
  background-image: url(~@/assets/by.png);
  background-size: contain;
  background-position: center;
  text-align: center;
  padding-top: 12px;
  background-repeat: no-repeat;
}
.by p:nth-child(2) {
  position: relative;
  font-size: 18px;
  top: 20px;
}
#pip1, #pip2 {
  position: relative;
  left: 49px;
  top: 40px;
  height: 52px;
  width: 2px;
  background-color: #3dbeff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .5);
}

.zx-box {
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
}
.zx {
  margin-top: 50px;
  position: relative;
  padding: 20px;
  width: 160px;
  border-radius: 10px;
  color: #fff;
  background-color: rgba(135, 142, 205, .1);
  box-shadow: 0 0 80px rgba(255, 255, 255, .1) inset;
}
.zx-pip-h {
  border-top: 2px solid #3dbeff;
  margin: 0 99px;
  height: 0;
  background-color: #3dbeff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .5);
}
.zx-pip {
  position: absolute;
  left: 79px;
  top: -50px;
  height: 50px;
  width: 2px;
  background-color: #3dbeff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .5);
}
.zx p {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #007eff;
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#aaf8fb), to(#439cf9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zx ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.zx ul li {
  height: 24px;
  line-height: 24px;
}
.zx ul li span:nth-child(1) {
  color: #007eff;
}
.zx ul li span:nth-child(2) {
  font-weight: 700;
  padding-left: 10px;
}


.sub2-data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 500px;
}
.sub2-data-box {
  box-sizing: border-box;
  border: 1px solid #292c75;
  box-shadow: 0 0 50px rgba(255, 255, 255, .1) inset;
  min-height: 80px;
  padding: 20px 0;
}
.sub2-data-p {
  box-sizing: border-box;
  border-left: 10px solid #d900c6;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.sub2-data-p div:first-child p {
  font-size: 16px;
  margin: 5px;
}
.sub2-data-p  div {
  vertical-align: middle;
}
.sub2-data-num {
  font-size: 28px;
  font-weight: 700;
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#aaf8fb), to(#439cf9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sub2-data-num span {
  font-size: 20px;
}
.fa-check-circle {
  color: #00d8f4;
}
.fa-exclamation-triangle {
  color: #d900c6;
}
.fa-wifi {
  color: #999;
}
.sub2-data .sub2-data-box:nth-child(4) .sub2-data-p, .sub2-data .sub2-data-box:nth-child(5) .sub2-data-p{
  font-size: 16px;
}


.sub2-table {
  height: 100%;
  min-height: 266.66px;
}
.sub2-table table {
  width: 100%;
  height: 100%;
  border: 1px solid #292c75;
  border-collapse:collapse;
}
.sub2-table table thead tr {
  height: 42px;
  background-color: #282b72;
}
.sub2-table th {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#aaf8fb), to(#439cf9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sub2-table td {
  text-align: center;
  width: 25%;
  font-size: 16px;
}
.sub2-table table tbody tr:nth-child(even) td{
  background-color: #1c1c5b;
}
/* .sub2-table table tbody tr:nth-child(1) td:first-child {
  border-right: 1px solid #282b72;
  color: #00d8f4;
  font-size: 18px;
} */
.sub2-table table tbody tr:nth-child(4) {
  border-top: 1px solid #282b72;
}
/* .sub2-table table tbody tr:nth-child(4) td:first-child {
  background-color: transparent!important;
  border-right: 1px solid #282b72;
  color: #00d8f4;
  font-size: 18px;
} */

/* sub3 */
.sub3-left {
  width: 30%;
  display: flex;
  flex-direction: column;
}
.sub3-left > div:first-child {
  height: 280px;
}
.sub3-data-box {
  box-sizing: border-box;
  border: 1px solid #292c75;
  box-shadow: 0 0 50px rgba(255, 255, 255, .1) inset;
  min-height: 80px;
  padding: 10px 0;
}
.sub3-data {
  display: flex;
  flex-direction: column;
  padding: 10px;
  justify-content: space-between;
  height: 100%;
  min-height: 286.66px;
}

.sub3-table {
  padding: 10px;
}
.sub3-table h4{
  text-align: center;
}

.sub3-right {
  width: 70%;
  display: flex;
  flex-direction: column;
}
.sub3-right-part1 {
  display: flex;
  height: 100%;
  min-height: 286.66px;
}
.sub3-right-part1-box1 {
  width: 60%;
  padding: 10px;
 
}
.sub3-right-part2 {
  height: 100%;
  padding: 10px;
}

.sub3-list {
  padding: 40px 100px 25px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sub3-list-title {
  display: flex;
  justify-content: flex-end;
  height: 24px;
  color: #0278da;
}
.sub3-list-title div {
  text-align: right;
  width: 100%;
  padding-right: 40px;
}
.sub3-list-row {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
.sub3-list-row>div:first-child {
  font-size: 16px;
  width: 120%;
}
.sub3-list-row>div {
  text-align: right;
  width: 100%;
}
.sub3-list-data {
  display: flex;
  justify-content: flex-end;
}
.sub-list-num {
  display: inline-block;
  width: 26px;
  margin-right: 4px;
  height: 36px;
  border-radius: 4px;
  background-color: rgba(128, 160, 247, 0.2);
  box-shadow: 0 0 10px  rgba(215, 255, 255, 0.14);
  line-height: 36px;
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(100, 100, 140, .2);
}
.sub-list-unit {
  padding-top: 10px;
}
.sub-list-unit span {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#00f7d5), to(#007eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-size: 22px;
}
.sub-list-num span {
  background-image: linear-gradient(to bottom, #fff 50% , #a7a7a7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#sub3_chart1, #sub3_chart2, #sub3_chart3 {
  width: 100%;
  min-height: 250px;
}

.sub4-temp-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  border-bottom: 1px solid #1c1c5b;
}
.sub4-temp-img {
  height: 100px;
  width: 100px;
  text-align: center;
  background-size: 60px 70px;
  background-repeat: no-repeat;
  background-position: center;
  /* background-image: url(./img/temperature2.svg); */
}
.sub4-temp-data>div{
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#00f7d5), to(#007eff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
}
.sub4-temp-data>p {
  font-size: 14px;
  color: #fff;
  margin: 0;
}
.sub4-temp-data span {
  font-weight: 900;
  font-size: 48px;
}
#sub4_chart1, #sub4_chart2, #sub4_chart3 {
  width: 100%;
  min-height: 250px;
}

.pop-win {
  /* display: none; */
  position: fixed;
  width: 80%;
  height: 80%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(27, 29, 85, .6);
  box-shadow: 0 2px 4px rgba(40, 40, 40, .2),0 0 1px rgba(40, 40, 40, .2) inset;
  z-index: 2;
}
.mask {
  /* display: none; */
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 1;
  background-color: rgba(255, 255, 255, .65);
}
.mask-blue {
  filter: blur(3px);
}
.pop-form > * {
  display: inline-block;
}